<template>
  <q-card v-if="data" class="q-pa-md">
    <div class="row q-col-gutter-md">
      <div class="col-12">
        <div class="row q-gutter-sm items-center">
          <div class="col-auto">
            <q-icon :name="(typeof data.icon === 'object') ? getLanguageText(data.icon, $i18n.locale) : data.icon"
                    size="sm" />
          </div>
          <div class="col text-body1">
            {{ (typeof data.name === 'object') ? getLanguageText(data.name, $i18n.locale) : data.name }}
          </div>
        </div>
      </div>
      <div class="col-12">
        <div class="row q-col-gutter-md">
          <div class="col-12" v-for="(item, key) in data.address" :key="key">
            <address-card :data="item"/>
          </div>
        </div>
      </div>
    </div>
  </q-card>
</template>

<script>
  import AddressCard from "./AddressCard";
  import { getLanguageText } from "src/lib/Utils";
  export default {
    name: "ServerCard",
    components: {AddressCard},
    props: {
      data: {
        type: Object
      }
    },
    methods: {
      getLanguageText
    },
    mounted () {
    }
  }
</script>

<style scoped>

</style>
